<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Login Lot</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="http://127.0.0.1:8000/static/sdk/sdk.css" />
    <link rel="stylesheet" href="http://127.0.0.1:8000/static/sdk/helper.css" />
    <link rel="stylesheet" href="http://127.0.0.1:8000/static/css/login.css">
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script src="http://127.0.0.1:8000/static/sdk/sdk.js"></script>
    <script type="text/javascript">
        (function () {
            let amis = amisRequire('amis/embed');
            let amisJSON = {
                "type": "page",
                "className": "float-right",
                "title": "Welcome lot", //title
                "toolbar": { //toolbar
                    "type": "wrapper",
                    "className": "box-border right-0.5 absolute",
                    "body": {
                        "type": "button-toolbar",
                        "buttons": [{
                                "type": "button",
                                "label": "sign in",
                                "level": "success",
                                "actionType": "link",
                                "link": "http://127.0.0.1:8000/login/"
                            },
                            {
                                "type": "button",
                                "label": "sign up",
                                "actionType": "link",
                                "link": "http://127.0.0.1:8000/register/"
                            }
                        ]
                    }
                },

                "body": [{ //body
                    "type": "flex",
                    "justify": "space-evenly",
                    "items": [{
                        "type": "flex",
                        "direction": "column",
                        "items": [{
                            "type": "divider"
                        }, {
                            "type": "form",
                            "title": "login in",
                            "name": "登录",
                            "panelClassName": "border-solid border-2 border-blue-500 rounded-xl shadow-lg",
                            "className": "box-content login-form",
                            // TODO finish the login api
                            "api": {
                                "method": "post",
                                "url": "http://127.0.0.1:8000/login/",
                                "headers": {
                                    //"X-CSRFToken": "${window:document[\"cookie\"]|split:=|nth:1}"
                                },
                                "requestAdaptor":"api.headers[\"X-CSRFToken\"] = document.cookie.split(\"=\")[1];return {...api,data: {...api.data}}",
                                //"adaptor":"api.headers[\"X-CSRFToken\"] = null;return {...payload};"
                            },
                            "rules": [{
                                "rule": "(data.password.length >= 8 &&  data.username.length >= 0)",
                                "message": "账户或者密码错误"
                            }],
                            "redirect":"http://127.0.0.1:8000/controlboard/",
                            "controls": [{
                                    "type": "text",
                                    "label": "Username",
                                    "name": "username"
                                },
                                {
                                    "type": "password",
                                    "label": "Password",
                                    "name": "password"
                                }
                            ]
                        }]
                    }]
                }]
            };
            let amisScoped = amis.embed('#root', amisJSON);
        })();
    </script>
</body>

</html>